<script setup lang="ts">
useHead({
  titleTemplate: `%s - 登录`,
  meta:[
    {
      name: "description",
      content: `登录页面`
    }
  ]
})

definePageMeta({
  layout:"start"
})
const username = ref('');
const password = ref('');
const goRegister=()=>{
  navigateTo('/register');
}
const onSubmit =(values:string) => {
  //TODO 登陆前是否先清除一下localstorage呢？
  // console.log('submit', values);
  cFetch<User>('/account/api/login',{
    auth:false,
    defaultOpts:{
      method: 'POST',
      body:values
    }
  }).then(res=>{
    if(res.code === 200){
      showNotify({
        message:'登录成功',
        type:'success',
      })
      userStore().setToken(res.data[0].token);
      //初始化ws

      roleStore().setRole('0')
      bottomBarStore().index=0
      navigateTo('/home/passenger')
    }
  })
};
// console.log(userStore().getToken())
</script>

<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名/手机号"
          :rules="[{ required: true, message: '请填写用户名/手机号' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>

  </van-form>
  <span class="my-font" @click="goRegister">还没有账号？去注册</span>
  <span class="help" @click="navigateTo('/questions')">常见问题</span>

<!--  <van-button style="position: relative;top:40px;left: 40px" type="warning" @click="navigateTo('/home')">测试按钮，跳home</van-button>-->
</template>

<style scoped>
.my-font {
  color: gray;
  float: right;
  position: absolute;
  right: 10%;
}
.help{
  left: 5%;
  color: gray;
  position: absolute;
}
</style>